html,
body {
    width: 100%;
    height: 100%;
    background-color: pink;
}

.ly-box01 {
    width: 50px;
    height: 50px;
    background-color: #FFF;
    border-radius: 25px;
    position: absolute;
    left: 48%;
    bottom: 50%;
    margin-bottom: 50%;
    overflow: hidden;
    transform-origin: center bottom;
    animation: box_to_point 18.5s 0s, bounce 2.5s 18.5s;
}

@keyframes box_to_point {
    0% {
        margin-bottom: 50%;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: absolute;
        left: 48%;
        bottom: 50%;
    }
    10% {
        margin-bottom: 0;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
        left: 48%;
        bottom: 50%;
    }
    14% {
        margin-bottom: 0;
        width: 80%;
        height: 550px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        left: 10%;
        bottom: 12%;
    }
    96% {
        margin-bottom: 0;
        width: 80%;
        height: 550px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.6);
        position: absolute;
        left: 10%;
        bottom: 12%;
    }
    100% {
        margin-bottom: 0;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
        left: 48%;
        bottom: 50%;
    }
}

@keyframes bounce {
    0% {
        margin-bottom: 0;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        bottom: 50%;
        left: 48%;
    }
    50% {
        margin-bottom: 0;
        left: 48%;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        bottom: 0;
        left: 48%;
    }
    100% {
        margin-bottom: 0;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        left: 48%;
        bottom: 0;
        left: 20%;
    }
}


/*文本*/

.ly-txt01 {
    position: absolute;
    width: 90%;
    left: 2%;
    top: 10%;
}

.ly-stxt01 {
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    opacity: 0;
    animation: ly-stxt01_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt01_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt01_move {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    98% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.ly-stxt02 {
    font-family: Microsoft YaHei;
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    margin-top: -71px;
    opacity: 0;
    animation: ly-stxt02_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt02_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt02_move {
    0% {
        opacity: 0;
        margin-top: -71px;
    }
    8% {
        opacity: 0;
        margin-top: -71px;
    }
    16% {
        opacity: 1;
        margin-top: 0;
    }
    90% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: 0;
    }
}

.ly-stxt03 {
    font-family: Microsoft YaHei;
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    opacity: 0;
    margin-top: -71px;
    animation: ly-stxt03_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt03_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt03_move {
    0% {
        opacity: 0;
        margin-top: -71px;
    }
    16% {
        opacity: 0;
        margin-top: -71px;
    }
    24% {
        opacity: 1;
        margin-top: 0;
    }
    90% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: 0;
    }
}

.ly-stxt04 {
    font-family: Microsoft YaHei;
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    opacity: 0;
    margin-top: -71px;
    animation: ly-stxt04_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt04_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt04_move {
    0% {
        opacity: 0;
        margin-top: -71px;
    }
    24% {
        opacity: 0;
        margin-top: -71px;
    }
    32% {
        opacity: 1;
        margin-top: 0;
    }
    90% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: 0;
    }
}

.ly-stxt05 {
    font-family: Microsoft YaHei;
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    opacity: 0;
    margin-top: -71px;
    animation: ly-stxt05_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt05_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt05_move {
    0% {
        opacity: 0;
        margin-top: -71px;
    }
    32% {
        opacity: 0;
        margin-top: -71px;
    }
    40% {
        opacity: 1;
        margin-top: 0;
    }
    90% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: 0;
    }
}

.ly-stxt06 {
    font-family: Microsoft YaHei;
    font-color: #000;
    font-size: 18px;
    position: relative;
    left: 5%;
    top: 5%;
    opacity: 0;
    margin-top: -71px;
    animation: ly-stxt06_move 15s;
    animation-delay: 5s;
    -webkit-animation: ly-stxt06_move 15s;
    -webkit-animation-delay: 5s;
}

@keyframes ly-stxt06_move {
    0% {
        opacity: 0;
        margin-top: -71px;
    }
    32% {
        opacity: 0;
        margin-top: -71px;
    }
    40% {
        opacity: 1;
        margin-top: 0;
    }
    90% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: 0;
    }
}

p>.a1 {
    display: inline-block;
    text-align: center;
    width: 150px;
    height: 40px;
    line-height: 40px;
    background-color: #ee9ca7;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 20px;
    position: absolute;
    bottom: 10px;
    left: 25px;
}
p>.a2 {
    display: inline-block;
    text-align: center;
    width: 150px;
    height: 40px;
    line-height: 40px;
    background-color: #ee9ca7;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 20px;
    position: absolute;
    bottom: 10px;
    right: 37px;
}